<template>
    <div>
        <el-card class="mb">
            <el-button type="primary" plain size="small" @click="download" style="margin-right: 10px;">下载模板</el-button>
           
            <el-upload class="upload-demo" action="/user/import" multiple style="     display: inline-block;margin-bottom: 10px;"
                :limit="1" :headers="{
                    Authorization: token
                }" :on-success="handleSuccess" :show-file-list="false" :file-list="fileList">
                <el-button size="small" plain type="primary">点击上传</el-button>

          
            </el-upload>
          
        </el-card>
        <el-card>
            <div class="table">
                <el-table :data="tableData" strip>

                    <el-table-column type="index" label="序号" align="center" sortable></el-table-column>
                    <el-table-column prop="username" label="用户名"></el-table-column>
                    <el-table-column prop="userSn" label="Userid"></el-table-column>
                    <el-table-column prop="id" label="id"></el-table-column>
                    <el-table-column prop="shoppingGender" label="性别"></el-table-column>
                    <el-table-column prop="age" label="年龄"></el-table-column>
                    <el-table-column prop="membershipLevel" label="会员等级"></el-table-column>
                    <el-table-column prop="createTime" label="注册时间"></el-table-column>
                    <el-table-column label="操作" align="center" width="180" fixed="right">
                        <template v-slot="scope">
                             <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pagination">
                    <el-pagination background @current-change="handleCurrentChange" :current-page="queryform.pageNum"
                        :page-sizes="[5, 10, 20]" :page-size="queryform.pageSize" layout="total, prev, pager, next"
                        :total="total">
                    </el-pagination>
                </div>
            </div>

        </el-card>
        <el-dialog title="广告信息" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
            <el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
             
                <el-form-item label="图片" prop="img">
                    <el-upload action="/files/upload" :headers="{ token: user.token }"
                    :file-list="fileList"
                        :on-success="handleFileSuccess">
                        <el-button type="primary">上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="商家" prop="business_id" v-if="user.role == 'ADMIN'">
                    <el-select style="width: 100%" v-model="form.business_id">
                        <el-option v-for="item in sjlist" :key="item.id" :value="item.id"
                            :label="item.name"></el-option>
                    </el-select>
                </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="fromVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import service from '@/request';

export default {
    data() {
        return {
            fileList:[],
            tableData: [],  // 所有的数据
            pageNum: 1,   // 当前的页码
            pageSize: 10,  // 每页显示的个数
            total: 0,
            username: null,
            token: "",
            name: null,
            fromVisible: false,
            avatar: "",
            queryform: {
                keyword: "",
                current: 1,
                size: 10
            },
            license: "",
            form: {
                avatar: "",
                license: ""
            },
            user: {},
            rules: {

                cname: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                ],

                // business_id: [
                //     { required: true, message: '请选择商家类型', trigger: 'blur' },
                // ]
            },
            ids: [],
            sjlist: [],
        }
    },
    mounted() {
        this.token ="Bearer "+window.localStorage.getItem("token")
        this.user = JSON.parse(window.localStorage.getItem("userinfo"))
        console.log(this.user)
       
        this.getlist()
    },
    methods: {
        async download() {
            const res = await service.get("/user/importTemplate", { responseType: "blob" });
            console.log(res)
            // 创建一个a标签
            const link = document.createElement("a");
            // 创建一个blob实例
            let blob = new Blob([res], { type: "application/x-excel" });
            // 隐藏a标签显示
            link.style.display = "none";
            // 生成url并添加到a标签的href属性上
            link.href = URL.createObjectURL(blob);
            // 下载的文件名称
            link.download = "模板.xls";
            // 将a标签添加到body中
            document.body.appendChild(link);
            // 模拟点击a标签
            link.click();
            // 将a标签从body中移除
            document.body.removeChild(link);
            // 释放blob对象
            URL.revokeObjectURL(link.href);
            this.$message.success("下载成功")



        },
    
        handleSuccess(e){
console.log(e)
if(e.code == 200){
    this.$message.success("导入成功")
    this.getlist()
}
        },
        handleFileSuccess(e){
            console.log(e)
            this.form.img=e.data

        },
        async getall() {
            const res = await service.get("/Business/all");
            console.log(res)
            this.sjlist = res.data.list
        },

        del(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await service.delete("/user/" + id)
                console.log(res)
                if (res.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getlist()
                }

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        force(e) {
            this.form.timeRange = e;
            this.$forceUpdate();
        },
        handleEdit(row) {
            this.form = row;
            this.fileList=[]
            this.fileList.push({
                name:"图片",
                url:row.img
            })
            this.fromVisible = true
        },
        search() {
            this.queryform.current = 1;
            this.queryform.size = 10;
            this.getlist()
        },
        research() {
            this.queryform.keyword = ""
            this.queryform.current = 1;
            this.queryform.size = 10;
            this.getlist()

        },
        async getlist() {
           
            const res = await service.get("/user/page", {params:this.queryform});
            console.log(res);
            if (res.code == 200) {
                this.tableData = res.data.records;
                this.total = res.data.total;
            }


        },
        add() {
            this.avatar = ""
            this.license = "";
            this.form = {}
            this.fromVisible = true

        },
        handleLicenseSuccess(e) {

        },
        async save() {
            let busid = ""
            if (this.user.role == 'BUSINESS') {
                busid = this.user.id
            } else {
                busid = this.form.business_id
            }
            if (!this.form.id) {
                const res = await service.post("/Banner/add", {
                    img:this.form.img,
                    businessId: busid
                });
                if (res.code == 200) {
                    this.fromVisible = false
                    this.$message.success("操作成功")
                    this.getlist()
                }
            } else {
                const res = await service.post("/Banner/update", {
                    id:this.form.id,
                    img:this.form.img,
                    businessId: busid
                });
                if (res.code == 200) {
                    this.fromVisible = false
                    this.$message.success("操作成功")
                    this.getlist()
                }
            }




        },
        handleCurrentChange(e) {

        },
        handleAvatarSuccess(e) {
            console.log(e)
            this.avatar = e.data;
            console.log(this.form.avatar)
        },
        handleAvatarSuccess1(e) {

            this.license = e.data;
        }
    }
}
</script>
<style scoped>
.mb {
    margin-bottom: 10px;
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px !important;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>